<style>
    #mask{  background-color:#ccc;  opacity:0.5;  filter: alpha(opacity=50);  position:absolute;  left:0;  top:0;  z-index:1000;}
    #login{  position:fixed;  width: 650px;  height: 150px;  z-index:1001;  background: white;  border-radius: 15px;  }
    @media (max-width: 1000px) {
        #login{width: 350px; min-height: 100px;}
        .js-delete-message{display: block}
    }
    .unread{color: red;font-size: 12px;}
    .js-delete-message{display: none;position: absolute;right: 0;top:0;font-size: 20px;}
    .message-box:hover .js-delete-message {display: block;}
</style>
<div style="min-height:600px; width: 80%; margin: 0 auto;">
    <div class='weui-flex'>
        <div class='weui-flex__item'>
            <div id="message-list" class='bc-list' data-port='http://api.hongyanche.com/message/getlist'>
                <div class='weui-cells__title'>消息列表</div>
                <div class='bc-list-template weui-cells'>
                    <div class="weui-cells">
                        <a class="weui-cell weui-cell_access" href="javascript:;">
                            <div class="weui-cell__bd message-box" style="position: relative;">
                                <i class="weui-icon weui-icon-cancel weui-icon-original js-delete-message">
                                    <message_id list=1 class="hidden"></message_id>
                                </i>
                                <p class="js-message-detail">
                                    <message_id list=1 class="hidden"></message_id>
                                    【<message_title list=1></message_title>】
                                    <content list=1 class="hidden1"></content>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <sender_name list=1 class="hidden"></sender_name>
                                    <create_time list=1></create_time>
                                    <url list=1 class="hidden"></url>
                                    <released list=d class="unread">[未读]</released>
                                    <demand list=1 class="hidden"></demand>
                                </p>
                            </div>
                            <div class="weui-cell__ft">
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>
        <div style="width:20px;"></div>
    </div>
    <div style='height: 50px'></div>
</div>

<script>
    (function (w, u) {
        function openNew() {
            //获取页面的高度和宽度
            var sWidth=document.body.scrollWidth;
            var sHeight=document.body.scrollHeight;

            //获取页面的可视区域高度和宽度
            var wHeight=document.documentElement.clientHeight;

            var oMask=document.createElement("div");
            oMask.id="mask";
            oMask.style.height=sHeight+"px";
            oMask.style.width=sWidth+"px";
            document.body.appendChild(oMask);
            var oLogin=document.createElement("div");
            oLogin.id="login";
            oLogin.innerHTML="<div class='loginCon'><div id='close' style='position: absolute; right: 0; top: 0;'><i class='weui-icon weui-icon-cancel weui-icon-original' style='font-size: 25px;'></i></div></div>";
            document.body.appendChild(oLogin);
            //获取登陆框的宽和高
            var dHeight=oLogin.offsetHeight;
            var dWidth=oLogin.offsetWidth;
            //设置登陆框的left和top
            oLogin.style.left=sWidth/2-dWidth/2+"px";
            oLogin.style.top=wHeight/2-dHeight/2+"px";
            //点击关闭按钮
            var oClose=document.getElementById("close");

            //点击登陆框以外的区域也可以关闭登陆框
            oClose.onclick=oMask.onclick=function(){
                document.body.removeChild(oLogin);
                document.body.removeChild(oMask);
                $.ajax({
                    url:'/message/getlist',
                    data:{
                        count:1
                    },
                    success:function (e) {
                        if(e.data.count==0){
                            $('#messagecount').html(e.data.count)
                            $('#messagecount').css('color','white')
                        }else {
                            $('#messagecount').html(e.data.count)
                            $('#messagecount').css('color', '#FFA500')
                        }
                    }
                });
                LIST.reload('#message-list');
            };
        }
//        function isReleased() {
//            $('#message-list').find('.js-message-detail').each(function (index, el) {
//                if ($(el).children('released').text() == 1) {
//                    $(el).addClass('unread');
//                }
//            })
//        }
//            isReleased();
            $('#message-list').on('click', '.js-message-detail', function () {
                var messageId = $(this).children('message_id').text();
                $.ajax({
                    url: '/message/read',
                    type: 'POST',
                    data: {
                        message_id: messageId
                    },
                    success: function (data) {

                    },
                    error: function () {
                        TOAST.warn("失败", ' ', 2);
                    }
                });
                openNew();
                var title = $(this).children('message_title').text();
                var content = $(this).children('content').text();
                var url = $(this).children('url').text();
                var senderName = $(this).children('sender_name').text();
                var demand = $(this).children('demand').text();
                if(demand !='system') {
                    $('#login').append(' <div style="text-align: center"><h3 style="padding: 5px">' + title + '</h3></div> <div style="padding: 10px;"> <a href="' + url + '">' + content + '</a> </div>')
                }else{
                    $('#login').append(' <div style="text-align: center"><h3 style="padding: 5px">' + title + '</h3></div> <div style="padding: 10px;">'+ content+'</div>')
                }
             });

        // 删除消息
        $('#message-list').on('click', '.js-delete-message', function () {
            var messageID = $(this).children('message_id').text();
            var delet = confirm('是否删除这条消息?');
            if(delet) {
                $.ajax({
                    url: '/message/remove',
                    type: 'POST',
                    data: {
                        message_id: messageID
                    },
                    success: function (data) {
                        if (data.state) {
                            TOAST.success("成功", ' ', 2);
                            LIST.reload('#message-list');
                        } else {
                            TOAST.warn(data.errormsg, ' ', 2);
                        }
                    }
                })
            }
        })
    })(window, undefined)
</script>